<div class="agenda-container">
  {{#if days}}
    {{#each days}}
      <div class="agenda-day{{#if isToday}} agenda-today{{/if}}">
        <h3 class="agenda-date" tabindex="-1">
          <span aria-hidden="true">{{date}}</span>
          <span class="screenreader-only">{{accessibleDate}}</span>
        </h3>
      </div>

        <div class="agenda-event__container">
          <ul class="agenda-event__list">
            {{#each events}}
              <li class="agenda-event__item" data-event-id="{{id}}">
                <span class="screenreader-only">
                  {{readableType}},
                  {{#if assignment}}
                    {{#t}}Due {{/t}} {{fcMomentToString originalStart "tiny"}}
                  {{else}}
                    {{#if allDay}}
                      {{#t}}All Day{{/t}}
                      {{fcMomentToDateString originalStart "short"}}
                    {{else}}
                      {{#t}}Starts at{{/t}}
                      {{fcMomentToString originalStart "tiny"}}
                      {{#t}}Ends at{{/t}}
                      {{fcMomentToString end "tiny"}}
                    {{/if}}
                  {{/if}},
                </span>
                <span class="screenreader-only">
                  {{#if ../../meta.better_scheduler}}
                    {{#if isAppointmentGroupEvent}}
                      {{#if can_edit}}
                        {{#truncate title 60}}{{/truncate}} - {{appointmentGroupEventStatus}} {{#if reservedUsers }} - {{reservedUsers}} {{/if}}
                      {{else}}
                        {{#truncate title 60}}{{/truncate}} - {{appointmentGroupEventStatus}}
                      {{/if}}
                    {{else}}
                      {{#truncate title 60}}{{/truncate}}
                    {{/if}}
                  {{else}}
                    {{#ifAll ../../../meta.displayAppointmentEvents isAppointmentGroupEvent}}
                      {{appointmentGroupEventStatus}}
                    {{else}}
                      {{#truncate title 60}}{{/truncate}}
                    {{/ifAll}}
                  {{/if}}
                </span>
                <span class="screenreader-only">
                  {{#if isCompleted}}
                    {{#t}}completed{{/t}}
                  {{else}}
                    {{#t}}Not Completed{{/t}}
                  {{/if}}
                </span>
                <span class="screenreader-only">{{#t}}Calendar {{contextInfo.name}}{{/t}}</span>
                <div class="agenda-event__item-container" tabindex="0" role="button">
                  <div class="agenda-event__icon group_{{contextCode}}">
                    {{> icons/{{iconType}}}}
                  </div>
                  <span class="screenreader-only">{{#t}}Open event menu{{/t}}</span>
                  <div class="agenda-event__time" aria-hidden="true">
                    {{#if assignment}}
                      {{#t "due"}}Due {{/t}} {{fcMomentToString originalStart "tiny"}}
                    {{else}}
                      {{#unless allDay}}
                        {{fcMomentToString originalStart "tiny"}}
                      {{/unless}}
                    {{/if}}
                  </div>
                  <span class="agenda-event__title group_{{contextCode}} {{#if isCompleted}}calendar__event--completed{{/if}}">
                    {{#if ../../meta.better_scheduler}}
                      {{#if isAppointmentGroupEvent}}
                        {{#if can_edit}}
                          {{#truncate title 60}}{{/truncate}} - {{appointmentGroupEventStatus}} {{#if reservedUsers }} - {{reservedUsers}} {{/if}}
                        {{else}}
                          {{#truncate title 60}}{{/truncate}} - {{appointmentGroupEventStatus}}
                        {{/if}}
                      {{else}}
                        {{#truncate title 60}}{{/truncate}}
                      {{/if}}
                    {{else}}
                      {{#ifAll ../../../meta.displayAppointmentEvents isAppointmentGroupEvent}}
                        {{appointmentGroupEventStatus}}
                      {{else}}
                        {{#truncate title 60}}{{/truncate}}
                      {{/ifAll}}
                    {{/if}}
                  </span>
                </div>
              </li>
            {{/each}}
          </ul>
        </div>

    {{/each}}
  {{else}}
    {{#t "no_events"}}<span class="agendaView--no-assignments">No events after this date.</span>{{/t}}
  {{/if}}
</div>

<div class="agenda-actions">
  {{#if meta.hasMore}}
    <a href="#" class="btn agenda-load-btn" role="button">Load more</a>
  {{/if}}
  <i class="loading-spinner"
    aria-label="{{#t "loading"}}Loading{{/t}}"
    aria-hidden="true"></i>
</div>
